<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0; margin: 0; list-style-type: none;}
        .cont{ width: 1200px; height: 600px; margin: 0 auto; background-color: aliceblue; overflow: hidden;}
        .ct{ transition: all 1s; width: auto; height: 600px; margin: 0 auto; display: inline-flex; flex-direction: row; flex-wrap: nowrap;}
        .ct img{ width: 100%; height: 100%; flex: none; display: block; object-fit: cover; transition:all 1s;  }
        .pagelist{ display: flex; flex-wrap: nowrap;}
        .pagelist li{ margin: 0 10px; cursor: pointer; transition: all 1s; position: relative;}
        .pagelist li.ani{ transition: all 1s;}
        .pagelist li.ani::before{ animation:anis 1s ease-out; content: ''; position: absolute; left: 0; top: -10px; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #ac0000;}
        .active{ background-color: red;}
        @keyframes anis {
            0% {
                top: 80px;
                left: 0;
            }
            40% {
                top: 80px;
                left: -50px;
            }
            80% {
                top: 80px;
                left: 50px;
            }
            100% {
                top: -10px;
                left: 0;
            }
        }
    </style>
</head>
<body>
    <div class="cont">
        <div class="ct">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
             <img src="pexels-photo-17975892.jpeg" alt="">
        </div>
    </div>
    
    <div class="pages">
        <button class="prev">prev</button>
        <button class="next">next</button>
    </div>
    <ul  class="pagelist">
        <li class="active ani">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <script type="text/javascript">
        let indexNum = 0;
        let prev = document.querySelector('.prev');
        let next = document.querySelector('.next');
        let pageli = document.querySelectorAll('.pagelist li');
        let img = document.querySelectorAll('.ct img');
        //获取ct的宽度
        let ctWidth = document.querySelector('.cont').offsetWidth;
        let ct = document.querySelector('.ct');

        for(let i = 0;i<pageli.length; i++){
            pageli[i].addEventListener('click',function(){
                    for(let j=0; j<pageli.length;j++){
                        pageli[j].classList.remove('active');
                    }
                    this.classList.add('active');
                    indexNum = i+1;
                    shouwpic(indexNum);
            })
        }
        
        next.onclick = function(){
            indexNum ++;
            if(indexNum >img.length){
                indexNum = 1;
            }
            shouwpic(indexNum);
        }
        prev.onclick = function(){
            indexNum --;
            if(indexNum <1){
                indexNum = pageli.length;
            }
            shouwpic(indexNum);
        }
        
        function shouwpic(indexNumes){
            let lefts = -((indexNumes-1) * ctWidth);
            ct.style = 'transform: translateX('+lefts+'px)';
            for(let i=0; i<pageli.length;i++){
                pageli[i].classList.remove('active');
                pageli[i].classList.remove('ani');
                if(i  == (indexNumes -1)){
                    pageli[i].classList.add('active');
                    pageli[i].classList.add('ani');
                }
            }
        }
       
        let timer = setInterval(function(){
            indexNum ++;
            if(indexNum >img.length){
                indexNum = 1;
            }
            shouwpic(indexNum);
        },3000)

    </script>
</body>
</html>